<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/css/pace.css" rel="stylesheet">
    <link href="../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="../../static/css/metismenu.min.css" rel="stylesheet">
    <link href="../../static/css/blue.css" rel="stylesheet">
    <!--template css-->
    <link href="../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5shiv.min.js"></script>
    <script src="../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--top bar start-->
<div class="top-bar light-top-bar"><!--by default top bar is dark, add .light-top-bar class to make it light-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">
                <a class="admin-logo" href="index.html">
                    <h1><img alt="" src="../../static/picture/logo-dark.png"></h1>
                </a>
                <div class="left-nav-toggle visible-xs visible-sm">
                    <a href="">
                        <i class="glyphicon glyphicon-menu-hamburger"></i>
                    </a>
                </div><!--end nav toggle icon-->
                <!--start search form-->
                <div class="search-form hidden-xs">
                    <form>
                        <input class="form-control" placeholder="Search for..." type="text">
                        <button class="btn-search" type="button"><i class="fa fa-search"></i></button>
                    </form>
                </div>
                <!--end search form-->
            </div>
            <div class="col-xs-6">
                <ul class="list-inline top-right-nav">
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-envelope"></i>
                            <span class="badge badge-warning">4</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Messages
                                </div>
                                <div class="scrollDiv">

                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-2.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">John Doe <label
                                                    class="label label-primary pull-right">Office</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-3.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Emily Doe  <label
                                                    class="label label-info pull-right">Marketing</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-4.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Michael Clark <label
                                                    class="label label-warning pull-right">Support</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-5.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Ronaldo <label
                                                    class="label label-success pull-right">Metting</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-bell"></i>
                            <span class="badge badge-danger">6</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Notifications
                                </div>
                                <div class="scrollDiv">
                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-cloud-upload text-primary"></i></span>
                                            <span class="notification-title">Upload Complete</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-info text-warning"></i></span>
                                            <span class="notification-title">Storage Space low</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-check text-success"></i></span>
                                            <span class="notification-title">Project Task Complete </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="right-sidebar-toggle" href="javascript: void(0);"><i
                                class="glyphicon glyphicon-align-right"></i></a>
                    </li>
                    <li class="dropdown avtar-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <img alt="" class="img-circle" src="../../static/picture/avtar-1.jpg" width="30">

                        </a>
                        <ul class="dropdown-menu top-dropdown">
                            <li><a href="javascript: void(0);"><i class="icon-bell"></i> Activities</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-user"></i> Profile</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-settings"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="javascript: void(0);"><i class="icon-logout"></i> Logout</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- top bar end-->

<!--right side bar panel-->
<nav class="right_sidebar" id="right-sidebar-toggle">
    <div class="nano">
        <div class="nano-content">
            <div>
                <!-- Nav tabs -->
                <ul class="list-inline nav-tab-panel clearfix" role="tablist">
                    <li class="active" role="presentation"><a aria-controls="projects" data-toggle="tab"
                                                              href="#projects"
                                                              role="tab">Projects</a></li>
                    <li role="presentation"><a aria-controls="contacts" data-toggle="tab" href="#contacts" role="tab">Contacts</a>
                    </li>

                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="projects" role="tabpanel">
                        <ul class="sidebar-list">
                            <li class="sidebar-title">
                                <h3 class="font-100"> Current projects</h3>
                                <small>There are <strong>7</strong> Current project</small>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Company</span>
                                    <h4>Website Re-design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 84%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-success" style="width: 84%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Metting</span>
                                    <h4>Business Consultancy</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 54%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-info" style="width: 54%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="contacts" role="tabpanel">

                        <ul class="list-unstyled sidebar-contact-list">
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-1.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-2.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>John doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-danger circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-3.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Eluga Smith</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-4.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Jonathan Doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-5.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li>
                                <div class=" text-center">
                                    <!-- Optional link to list more users-->
                                    <a class="btn btn-teal" href="javascript:void(0);" title="See more contacts">
                                        Load more..
                                    </a>
                                </div>
                            </li>
                        </ul><!--end sidebar contacts-list-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>
<!--end right side bar panel-->

<!--left navigation start-->
<aside class="float-navigation light-navigation">
    <div class="nano">
        <div class="nano-content">
            <ul class="metisMenu nav" id="menu">
                <li class="nav-heading"><span>Main Navigation</span></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-home"></i> Dashboard <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="index.html">Dashboard Alpha</a></li>
                        <li><a href="index-beta.html">Dashboard beta</a></li>

                    </ul>
                </li>
                <li class="active"><a href="widgets.html"><i class="fa fa-diamond"></i> Widgets </a></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-handbag"></i> E-commerce <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="ecommerce-dashboard.jsp">Dashboard</a></li>
                        <li><a href="ecommerce-products.jsp">products</a></li>
                        <li><a href="ecommerce-orders.jsp">orders</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-envelope-letter"></i> Mail <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="mail-index.html">Inbox</a></li>
                        <li><a href="mail-view.html">Inbox view</a></li>
                        <li><a href="mail-compose.html">Compose</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-grid"></i> Layouts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="layout-sidebar-topbar-dark.html">Sidebar +Topbar Dark</a></li>
                        <li><a href="layout-sidebar-colored.html">Sidebar Colored</a></li>
                        <li><a href="layout-horizontal.html">Horizontal</a></li>

                        <li><a href="layout-dashboard-only.html">Dashboard Only</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>Components</span></li>
                <li><a href="jquery-ui-elements.html"><i class="icon-wrench"></i> Jquery UI Elements</a></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-settings"></i> UI elements <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="false" class="nav-second-level nav">
                        <li><a href="ui-typography.html">Typography</a></li>
                        <li><a href="ui-icons.html">Icons</a></li>
                        <li><a href="ui-panels.html">Panels</a></li>
                        <li><a href="ui-buttons.html">Buttons</a></li>
                        <li><a href="ui-tabs.html">tabs</a></li>
                        <li><a href="ui-tip-pop.html">Tooltip & Popovers</a></li>
                        <li><a href="ui-alerts.html">Alerts</a></li>
                        <li><a href="ui-modals.html">modals</a></li>
                        <li><a href="ui-grid.html">grid system</a></li>
                        <li><a href="ui-carousel.html">Carousel</a></li>
                        <li><a href="ui-sweetalerts.html">Sweet alters</a></li>
                        <li><a href="ui-alertify.html">Alertify Alters</a></li>
                        <li><a href="ui-sliders.html">Sliders</a></li>
                        <li><a href="ui-nestable.html">Nestable</a></li>
                        <li><a href="ui-date-time-picker.html">Date time pickers</a></li>
                        <li><a href="ui-treeview.html">Tree view</a></li>
                        <li><a href="ui-draggable-panels.html">Draggable Panels</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-pencil"></i> Forms <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="form-basic.html">Basic elements</a></li>
                        <li><a href="form-file-upload.html">File upload</a></li>
                        <li><a href="form-editor.html">text editor</a></li>
                        <li><a href="form-wizard.html">Form Wizard</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-bar-chart"></i> Charts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="chart-flot.html">Flot</a></li>
                        <li><a href="chart-morris.html">Morris</a></li>
                        <li><a href="chart-radial.html">Radial</a></li>
                        <li><a href="chart-c3.html">C3</a></li>
                        <li><a href="chart-sparkline.html">Sparkline</a></li>
                        <li><a href="chart-rickshaw.html">rickshaw</a></li>
                        <li><a href="chart-chartjs.html">ChartJs</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-list"></i> Tables <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="table-basic.html">Basic tables</a></li>
                        <li><a href="table-data.html">Data tables</a></li>
                        <li><a href="table-foo.html">Foo tables</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-map"></i> Maps <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="map-vector.html">Vector map</a></li>
                        <li><a href="map-google.html">Google map</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>More</span></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder"></i> Pages <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="page-empty.html">Empty page</a></li>
                        <li><a href="page-lockscreen.html">Lock-screen</a></li>
                        <li><a href="../../page-login.jsp">Login</a></li>
                        <li><a href="page-register.html">Register</a></li>
                        <li><a href="page-forget-password.html">Forget Password</a></li>
                        <li><a href="../../404.jsp">404</a></li>
                        <li><a href="page-gallery.html">Gallery</a></li>
                        <li><a href="page-timeline.html">Timeline</a></li>
                        <li><a href="page-invoice.html">Invoice</a></li>
                        <li><a href="page-profile.html">Profile</a></li>
                        <li><a href="page-calendar.html">Calendar</a></li>
                        <li><a href="page-chat-room.html">Chat room</a></li>
                        <li><a href="page-faqs.html">Faqs</a></li>
                        <li><a href="page-pricing.html">Pricing</a></li>
                        <li><a href="page-contacts.html">Contacts</a></li>
                        <li><a href="page-blog.html">Blog</a></li>
                        <li><a href="page-blog-article.html">Blog article</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder-alt"></i> Nested menu
                        <span class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="javascript: void(0);">Level 1</a></li>
                        <li><a aria-expanded="true" href="javascript: void(0);">Level 2 <span
                                class="fa arrow"></span></a>
                            <ul aria-expanded="true" class="nav-third-level nav">
                                <li><a href="javascript: void(0);">Level 2</a></li>
                                <li><a href="javascript: void(0);">Level 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!--<li><a href="landing/home.html" target="_blank" class="bg-primary"><i class="icon-star"></i>Landing page</a></li>-->
            </ul>
        </div><!--nano content-->
    </div><!--nano scroll end-->
</aside>
<!--left navigation end-->


<!--main content start-->
<section class="main-content">


    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Widgets</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                    <li>Widgets</li>
                </ol>
            </div>
        </div>
    </div>
    <!--page header end-->


    <!--start page content-->

    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-primary padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-light-dark">
                        <em class="icon-cloud-upload fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">2300</h2>
                        <div class="text-uppercase">Uploads</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-teal padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-light-dark">
                        <em class="icon-bag fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">573</h2>
                        <div class="text-uppercase">Items</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-success padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-light-dark">
                        <em class="icon-users fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">1859</h2>
                        <div class="text-uppercase">Users</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-indigo padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-light-dark">
                        <em class="icon-cloud-download fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">456</h2>
                        <div class="text-uppercase">Downloads</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
    </div><!--end row-->

    <div class="row">
        <div class="col-md-4">
            <div class="widget bg-primary padding-0">
                <div class="padding-20">
                    <h1>$ 1,540</h1>

                    <h5 class="font-300 mv-0">
                        Monthly income
                    </h5>
                </div>
                <div class="flot-chart">
                    <div class="flot-chart-content" id="flot-chart1"></div>
                </div>
            </div><!-- end widget-->
        </div>
        <div class="col-md-4">
            <div class="panel widget padding-0">
                <div class="panel-body bg-primary">
                    <div class="h5 mt-0">Monthly incomes</div>
                    <!-- Line chart-->
                    <div id="sparkline4"></div>
                </div>
                <div class="panel-body">
                    <div class="row row-table text-center">
                        <div class="col-xs-6">
                            <p class="margin-b-0 text-muted">Gross income</p>
                            <h4 class="mv-0">$6000</h4>
                        </div>
                        <div class="col-xs-6">
                            <p class="margin-b-0 text-muted">Net income</p>
                            <h4 class="mv-0">$14500</h4>
                        </div>
                    </div>
                </div>
            </div><!-- end widget-->
        </div>
        <div class="col-md-4">
            <div class="panel widget padding-0">
                <div class="panel-body bg-indigo">
                    <div class="h5 mt-0">Monthly Visitors</div>
                    <!-- Line chart-->
                    <div id="sparkline5"></div>
                </div>
                <div class="panel-body">
                    <div class="row row-table text-center">
                        <div class="col-xs-6">
                            <p class="margin-b-0 text-muted">Unique Visitors</p>
                            <h4 class="mv-0">12000</h4>
                        </div>
                        <div class="col-xs-6">
                            <p class="margin-b-0 text-muted">Net visitors</p>
                            <h4 class="mv-0">43200</h4>
                        </div>
                    </div>
                </div>
            </div><!-- end widget-->
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-primary text-center">
                <h3 class="font-300">Title text</h3>
                <h1 class="font-300 font-lg">300</h1>
                <p class="margin-b-0">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
            </div><!-- end widget-->
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-danger text-center">
                <h3 class="font-300">Title text</h3>
                <h1 class="font-300 font-lg">430</h1>
                <p class="margin-b-0">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
            </div><!-- end widget-->
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-success text-center">
                <h3 class="font-300">Title text</h3>
                <h1 class="font-300 font-lg">670</h1>
                <p class="margin-b-0">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
            </div><!-- end widget-->
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="widget bg-teal text-center">
                <h3 class="font-300">Title text</h3>
                <h1 class="font-300 font-lg">450</h1>
                <p class="margin-b-0">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </p>
            </div><!-- end widget-->
        </div>
    </div>
    <div class="row">
        <div class=" col-md-3 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-body text-center">
                    <img alt="profile" class="img-circle margin-b-10" src="../../static/picture/avtar-1.jpg" width="80">
                    <p class="lead margin-b-0">Aaron Chavez</p>
                    <p class="text-muted">Administrator</p>
                    <p class="text-sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                        eget dolor. Aenean massa. </p>
                    <button class="btn btn-primary"><i class="demo-pli-male icon-fw"></i>Follow</button>
                    <hr>
                    <ul class="list-unstyled margin-b-0 text-center row">
                        <li class="col-xs-4">
                            <span class="font-600">1,345</span>
                            <p class="text-muted text-sm margin-b-0">Following</p>
                        </li>
                        <li class="col-xs-4">
                            <span class="font-600">23K</span>
                            <p class="text-muted text-sm margin-b-0">Followers</p>
                        </li>
                        <li class="col-xs-4">
                            <span class="font-600">278</span>
                            <p class="text-muted text-sm margin-b-0">Post</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div><!--end col-->
        <div class="col-md-3">
            <div class="widget text-center bg-indigo">
                <img alt="Profile Picture" class=" img-circle margin-b-10" src="../../static/picture/avtar-2.jpg"
                     width="70">
                <h4 class="font-400 margin-b-10">Jonathan Doe</h4>
                <ul class="list-inline text-center margin-b-0">
                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                </ul>
            </div>
            <div class="widget white-bg text-center">
                <img alt="Profile Picture" class="img-circle mar-btm margin-b-10" src="../../static/picture/avtar-3.jpg"
                     width="70">
                <h4 class="font-400 margin-b-0">Jonathan Doe</h4>
                <p class="text-muted margin-b-10">Web and Graphic designer</p>
                <div>
                    <button class="btn btn-teal">Follow</button>
                    <button class="btn btn-success">Message</button>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="widget padding-0 white-bg">
                <div class="bg-danger" style="height: 120px"></div>
                <div class="thumb-over">
                    <img alt="" class="img-circle" src="../../static/picture/avtar-5.jpg" width="100">
                </div>
                <div class="padding-20 text-center">
                    <p class="lead font-500 margin-b-0">Aaron Chavez</p>
                    <p class="text-muted">Administrator</p>
                    <p class="text-sm">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                        eget dolor. Aenean massa. </p>
                    <button class="btn btn-primary"><i class="demo-pli-male icon-fw"></i>Follow</button>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="widget white-bg">
                <div>
                    <div>
                        <span>Memory</span>
                        <small class="pull-right">10/200 GB</small>
                    </div>
                    <div class="progress progress-mini">
                        <div class="progress-bar" style="width: 60%;"></div>
                    </div>

                    <div>
                        <span>Bandwidth</span>
                        <small class="pull-right">20 GB</small>
                    </div>
                    <div class="progress progress-mini">
                        <div class="progress-bar" style="width: 50%;"></div>
                    </div>

                    <div>
                        <span>Activity</span>
                        <small class="pull-right">73%</small>
                    </div>
                    <div class="progress progress-mini">
                        <div class="progress-bar" style="width: 40%;"></div>
                    </div>

                    <div>
                        <span>FTP</span>
                        <small class="pull-right">400 GB</small>
                    </div>
                    <div class="progress progress-mini">
                        <div class="progress-bar progress-bar-danger" style="width: 20%;"></div>
                    </div>
                </div>
            </div>
            <div class="bg-indigo widget text-center">
                <p>
                    <img alt="" class="img-circle" src="../../static/picture/avtar-3.jpg" width="80">
                </p>
                <p>
                    <strong>Mika</strong>
                    <span>is now following you</span>
                </p>
            </div>
        </div>
    </div><!--end row-->

    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="widget white-bg  padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-primary">
                        <em class="icon-cloud-upload fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">2300</h2>
                        <div class="text-uppercase">Uploads</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
        <div class="col-md-3 col-sm-6">
            <div class="widget white-bg  padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-teal">
                        <em class="icon-bag fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">573</h2>
                        <div class="text-uppercase">Items</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
        <div class="col-md-3 col-sm-6">
            <div class="widget white-bg  padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-success">
                        <em class="icon-users fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">1859</h2>
                        <div class="text-uppercase">Users</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
        <div class="col-md-3 col-sm-6">
            <div class="widget white-bg  padding-0">
                <div class="row row-table">
                    <div class="col-xs-4 text-center pv-15 bg-indigo">
                        <em class="icon-cloud-download fa-3x"></em>
                    </div>
                    <div class="col-xs-8 pv-15 text-center">
                        <h2 class="mv-0">456</h2>
                        <div class="text-uppercase">Downloads</div>
                    </div>
                </div>
            </div><!--end widget-->
        </div><!--end col-->
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Chat
                </div>
                <div class="panel-body">
                    <div class="scrollDiv">
                        <ul class="chat-list list-unstyled">
                            <li class="clearfix chat-element">
                                <a class="pull-left" href='javascript: void(0);'>
                                    <img alt="" class="img-circle" src="../../static/picture/avtar-1.jpg">
                                </a>
                                <div class="media-body ">
                                    <div class="speech-box">
                                        <small class="pull-right text-primary">1m ago</small>
                                        <strong>Moni Sharma</strong>
                                        <p class="margin-b-0">
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                            Lorem Ipsum has been
                                        </p>
                                        <small class="text-info">Today 12:31 pm - 10.08.2016</small>
                                    </div>
                                </div>
                            </li><!--end chat elements-->

                            <li class="clearfix chat-element right">
                                <a class="pull-right" href='javascript: void(0);'>
                                    <img alt="" class="img-circle" src="../../static/picture/avtar-2.jpg">
                                </a>
                                <div class="media-body text-right">
                                    <div class="speech-box">
                                        <small class="pull-left text-primary">1m ago</small>
                                        <strong>Moni Sharma</strong>
                                        <p class="margin-b-0 text-right">
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                            Lorem Ipsum has been
                                        </p>
                                        <small class="text-info">Today 12:31 pm - 10.08.2016</small>
                                    </div>
                                </div>
                            </li><!--end chat elements-->
                            <li class="clearfix chat-element">
                                <a class="pull-left" href='javascript: void(0);'>
                                    <img alt="" class="img-circle" src="../../static/picture/avtar-1.jpg">
                                </a>
                                <div class="media-body ">
                                    <div class="speech-box">
                                        <small class="pull-right text-primary">1m ago</small>
                                        <strong>Moni Sharma</strong>
                                        <p class="margin-b-0">
                                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                            Lorem Ipsum has been
                                        </p>
                                        <small class="text-info">Today 12:31 pm - 10.08.2016</small>
                                    </div>
                                </div>
                            </li><!--end chat elements-->
                        </ul>
                    </div>
                </div><!--end panel body-->
                <div class="panel-footer">
                    <div class="input-group">
                        <input class="form-control" placeholder="Type your message here..." type="text">
                        <span class="input-group-btn">
                                    <button class="btn btn-primary">
                                        Send</button>
                                </span>
                    </div>
                </div>
            </div><!--panel-->
        </div><!--end col-->
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    To do List
                </div>
                <div class="panel-body">
                    <div class="scrollDiv">
                        <ul class="todo-list">
                            <li>
                                <input class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Lorem ipsum dolor</span>
                                <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 mins</small>
                            </li>
                            <li>
                                <input checked class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Printing and typesetting industry</span>
                                <small class="label label-info"><i class="fa fa-clock-o"></i> 3 mins</small>
                            </li>
                            <li>
                                <input class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Send files to John</span>
                                <small class="label label-warning"><i class="fa fa-clock-o"></i> 2 mins</small>
                            </li>
                            <li>
                                <input class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Go to the doctor dr Jagdish</span>
                                <small class="label label-danger"><i class="fa fa-clock-o"></i> 42 mins</small>
                            </li>
                            <li>
                                <input class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Lorem ipsum dolor</span>
                                <small class="label label-primary"><i class="fa fa-clock-o"></i> 1 mins</small>
                            </li>
                            <li>
                                <input class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Printing and typesetting industry</span>
                                <small class="label label-info"><i class="fa fa-clock-o"></i> 3 mins</small>
                            </li>
                            <li>
                                <input class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Send files to John</span>
                                <small class="label label-warning"><i class="fa fa-clock-o"></i> 2 mins</small>
                            </li>
                            <li>
                                <input class="i-checks" name="" type="checkbox" value=""/>
                                <span class="">Go to the doctor dr Jagdish</span>
                                <small class="label label-danger"><i class="fa fa-clock-o"></i> 42 mins</small>
                            </li>
                        </ul>
                    </div>

                </div>
                <div class="panel-footer">
                    This is a panel footer
                </div>
            </div>
        </div><!--end col-->
    </div><!--end row-->

    <!--end page content-->


    <!--Start footer-->
    <footer class="footer">
        <span>Copyright &copy; 2016. Float</span>
    </footer>
    <!--end footer-->

</section>
<!--end main content-->


<!--Common plugins-->
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/pace.min.js"></script>
<script src="../../static/js/jasny-bootstrap.min.js"></script>
<script src="../../static/js/jquery.slimscroll.min.js"></script>
<script src="../../static/js/jquery.nanoscroller.min.js"></script>
<script src="../../static/js/metismenu.min.js"></script>
<script src="../../static/js/float-custom.js"></script>
<!-- Flot -->
<script src="../../static/js/jquery.flot.js"></script>
<script src="../../static/js/jquery.flot.tooltip.min.js"></script>
<script src="../../static/js/jquery.flot.resize.js"></script>
<!--sparkline-->
<script src="../../static/js/jquery.sparkline.min.js"></script>
<!-- iCheck for radio and checkboxes -->
<script src="../../static/js/icheck.min.js"></script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue'
        });
    });
    //sparkline
    $("#sparkline4").sparkline([34, 43, 43, 35, 44, 32, 15, 22, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 42, 34, 56, 76, 15, 54, 23, 44], {
        type: 'line',
        lineWidth: "2",
        lineColor: '#fff',
        fillColor: '#23b7e5',
        height: "80",
        width: "100%"
    });
    $("#sparkline5").sparkline([43, 56, 34, 76, 54, 34, 21, 25, 46, 33, 86, 54, 73, 53, 12, 53, 23, 65, 23, 63, 53, 65, 43, 56, 46, 15, 54, 23, 44], {
        type: 'line',
        lineWidth: "2",
        lineColor: '#fff',
        fillColor: '#7986CB',
        height: "80",
        width: "100%"
    });
    //flot chart
    var d1 = [[1262304000000, 6], [1264982400000, 3057], [1267401600000, 20434], [1270080000000, 31982], [1272672000000, 26602], [1275350400000, 27826], [1277942400000, 24302], [1280620800000, 24237], [1283299200000, 21004], [1285891200000, 12144], [1288569600000, 10577], [1291161600000, 10295]];
    var d2 = [[1262304000000, 5], [1264982400000, 200], [1267401600000, 1605], [1270080000000, 6129], [1272672000000, 11643], [1275350400000, 19055], [1277942400000, 30062], [1280620800000, 39197], [1283299200000, 37000], [1285891200000, 27000], [1288569600000, 21000], [1291161600000, 17000]];

    var data1 = [
        {label: "Data 1", data: d1, color: '#52cff6'},
        {label: "Data 2", data: d2, color: '#1390b7'}
    ];
    $.plot($("#flot-chart1"), data1, {
        xaxis: {
            tickDecimals: 0
        },
        series: {
            lines: {
                show: true,
                fill: true,
                fillColor: {
                    colors: [{
                        opacity: 1
                    }, {
                        opacity: 1
                    }]
                }
            },
            points: {
                width: 0.1,
                show: false
            }
        },
        grid: {
            show: false,
            borderWidth: 0
        },
        legend: {
            show: false
        }
    });
</script>
</body>
</html>